<template>
  <BaseDialog fullscreen :loading="loading" destroy-on-close @confirm="save" @close="close" confirmText="保存" v-model="isShow" :title="title">
    <div class="h-full flex w-full flex-1">
      <div class="w-1/4">
        <el-form
            ref="formRef"
            :model="state.dataForm"
            :rules="rules"
            label-width="80px"
        >
          <el-row>
            <el-col  :span="24">
              <el-form-item label="模板名称" prop="templateName">
                <el-input placeholder="请输入模板名称" v-model="state.dataForm.templateName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col  :span="24">
              <el-form-item label="模板类型" prop="templateType">
                <BaseSelect dict="template_type" class="w-full"  placeholder="请选择模板类型" v-model="state.dataForm.templateType"></BaseSelect>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col  :span="24">
              <el-form-item label="应用类型" prop="type">
                <BaseSelect dict="application_type" class="w-full"  toNumber placeholder="请选择应用类型" v-model="state.dataForm.type"></BaseSelect>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col  :span="24">
              <el-form-item label="语言类型" prop="codeType">
                <BaseSelect dict="code_type" class="w-full" @change="changeCodeType"  placeholder="请选择语言类型" v-model="state.dataForm.codeType"></BaseSelect>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col  :span="24">
              <el-form-item label="相对路径" prop="filePath">
                <el-input placeholder="请输入文件相对路径" v-model="state.dataForm.filePath" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col  :span="24">
              <el-form-item label="文件名称" prop="fileName">
                <el-input placeholder="请输入文件名称" v-model="state.dataForm.fileName" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="flex-1 pl-1.5">
        <BaseCode ref="baseCodeRef"></BaseCode>
      </div>
    </div>
  </BaseDialog>
</template>

<script setup lang="ts">
import {nextTick, reactive, ref} from "vue";
import {TemplateModel} from "/@/api/generator/model/TemplateModel";
import {insertTemplate, updateTemplateByTemplateId} from "/@/api/generator/TemplateApi";
import {ElMessage} from "element-plus";
import {messageBox} from "/@/utils/BjxUtils";
import {useClipboard} from "@vueuse/core";
const emit = defineEmits(["load"])
const loading = ref(false)
const formRef = ref()
const isShow = ref(false)
const title = ref('')
const baseCodeRef = ref()
const state = reactive({
  dataForm:{
    templateId: '',
    templateName: '',
    templateContent: '',
    templateType: 'java',
    type: 1,
    codeType: 'java',
    filePath: '',
    fileName: ''
  } as TemplateModel
})
const rules = {
  templateName: [
    { required: true, message: '模板名称不能为空', trigger: 'blur' },
    { min: 1, max: 64, message: '模板名称长度为1到64个字符',trigger: 'blur' },
  ],
  templateType: [
    { required: true, message: '模板类型不能为空', trigger: 'blur' },
  ],
  type: [
    { required: true, message: '应用类型不能为空', trigger: 'blur' },
  ],
  filePath: [
    { required: true, message: '相对路径不能为空', trigger: 'blur' },
    { min: 1, max: 255, message: '相对路径长度为1到255个字符',trigger: 'blur' },
  ],
  fileName: [
    { required: true, message: '文件名称不能为空', trigger: 'blur' },
    { min: 1, max: 64, message: '文件名称长度为1到64个字符',trigger: 'blur' },
  ]
}
const init = (titleValue: string,data: TemplateModel) => {
  title.value = titleValue
  isShow.value = true
  if(data && data.templateId){
    state.dataForm = data
  }
  nextTick(()=>{
    formRef.value.resetFields()
    baseCodeRef.value.init(state.dataForm.templateContent,state.dataForm.codeType)
  })

}
const save = async () => {
  state.dataForm.templateContent = baseCodeRef.value.getData()
  if(!state.dataForm.templateContent){
    ElMessage.warning("模板内容不能为空")
    return
  }
  await formRef.value.validate()
  messageBox("是否将内容复制到剪切板?",async ()=>{
    const {  copy } = useClipboard({ source: state.dataForm.templateContent })
    copy()
    await saveTemplate()
  },async ()=>{
    await saveTemplate()
  })

}
const saveTemplate = async () => {
  loading.value = true
  if(state.dataForm.templateId){
    await updateTemplateByTemplateId(state.dataForm,()=>{
      loading.value = false
    })
  }else{
    await insertTemplate(state.dataForm,()=>{
      loading.value = false
    })
  }
  emit("load")
  close()
}
const changeCodeType = (value:string) => {
  baseCodeRef.value.changeLanguage(value)
}
const close = () => {
  state.dataForm = {
    templateId: '',
    templateName: '',
    templateContent: '',
    templateType: 'java',
    type: 1,
    codeType: 'java',
    filePath: '',
    fileName: ''
  }
  isShow.value = false
}
defineExpose({init})
</script>

<style scoped>

</style>